<template>
  <div class="signature-approval">
    <van-popup
      v-model="showPopup"
      position="bottom"
      round
      :style="{ height: '90%' }"
    >
      <van-form ref="formRef">
        <!-- 顶部标题栏 -->
        <van-nav-bar
          title="审批签名"
          left-arrow
          @click-left="showPopup = false"
        />

        <!-- 签名区域 -->
        <div class="signature-section">
          <van-cell-group inset title="电子签名">
            <div class="signature-pad-wrapper">
              <div class="signature-box">
                <VueSignaturePad
                  width="100%"
                  height="200px"
                  ref="signaturePad"
                />
              </div>
              <van-button
                class="clear-btn"
                size="small"
                type="danger"
                plain
                @click="undo"
              >
                清空签名
              </van-button>
            </div>
          </van-cell-group>
        </div>

        <!-- 审批意见 -->
        <div class="approval-section">
          <van-cell-group inset title="审批意见">
            <van-field
              v-model="form.message"
              type="textarea"
              rows="4"
              placeholder="请输入审批意见"
            />
          </van-cell-group>
        </div>

        <!-- 操作按钮 -->
        <div class="button-group">
          <van-button
            class="action-btn"
            plain
            type="danger"
            round 
            @click="handleBtn('REJECT')"
          >
            驳回
          </van-button>
          <van-button
            class="action-btn"
            plain
            type="info"
            round 
            @click="handleBtn('PASS')"
          >
            通过
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "SignatureApproval",

  data() {
    return {
      showPopup: false,
      form: {
        signature: "",
        message: "",
      },
    };
  },
  methods: {
    open() {
      this.showPopup = true;
    },
    undo() {
      this.$refs.signaturePad.clearSignature();
    },
    async handleBtn(action) {
      // if (!this.$refs.signaturePad.isEmpty()) {
        this.form.signature = this.$refs.signaturePad.saveSignature();

        // if (!this.form.message) {
        //   this.$toast.fail("请输入审批意见");
        //   return;
        // }

        // 处理表单提交逻辑
        this.form.skipType = action
        this.form.signature = this.form.signature.data;
        this.$emit("handle", this.form)

      //   this.showPopup = false;
      // } else {
      //   this.$toast.fail("请签名");
      // }
    },
  },
};
</script>

<style scoped>
.signature-approval {
  font-size: 14px;
}

.signature-section,
.approval-section {
  margin: 16px 0;
}

.signature-pad-wrapper {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
}

.signature-box {
  border: 1px solid #dcdee0;
  border-radius: 4px;
  overflow: hidden;
}

.clear-btn {
  margin-top: 8px;
  float: right;
}

.button-group {
  padding: 16px;
  display: flex;
  flex-direction: row;
  gap: 12px;
}

.action-btn {
  flex: 1;
}

:deep(.van-field__control) {
  min-height: 80px;
}

:deep(.van-button--primary) {
  background-color: #1989fa;
  border-color: #1989fa;
}
</style>